<template>
	<view class="container page-order-list">
		<view class="page-order-container">
			<!-- #ifdef APP-PLUS -->
			<view class="top_view"></view>
			<!-- #endif -->
			<view class="fixed-top">
				<view class="app-header">
					<!-- #ifndef MP-WEIXIN -->
					<view class="app-title">订单</view>
					<!-- #endif -->
					<view class="search-content">
						<text class="iconfont iconsousuo" />
						<input
							class="search-input"
							type="text"
							placeholder="商品名称/商品编号/订单编号"
						/>
					</view>
					<navigator class="action-msg" url="../user/message/index">
						<text class="iconfont iconxiaoxi" />
					</navigator>
				</view>

				<!-- 导航栏 agents导航栏标题 -->

				<view class="tab-button">
					<navTab
						ref="navTab"
						:tabTitle="tabTitle"
						@changeTab="changeTab"
					></navTab>
				</view>
			</view>

			<view class="module-order">
				<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
				<swiper
					style="min-height: 100vh;"
					:current="currentTab"
					@change="swiperTab"
				>
					<swiper-item
						v-for="(listItem, listIndex) in orderList"
						:key="listIndex"
					>
						<scroll-view
							style="height: 100%;"
							scroll-y="true"
							@scrolltolower="loadMore"
							scroll-with-animation
						>
							<view :id="'top' + listIndex" class="top-block">边距盒子</view>
							<view class="content tab-body">
								<view
									class="item"
									v-for="(item, index) in listItem.order"
									v-show="listItem.order.length > 0"
									:key="index"
								>
									<view class="item-header">
										<text class="item-shop">{{ item.shop }}</text>
										<text class="item-status">{{ item.status }}</text>
									</view>

									<view class="item-body">
										<navigator
											:key="pIndex"
											:url="'../order/detail/index?id=' + item.sn"
											v-for="(product, pIndex) in item.productList"
											class="item-content"
										>
											<productInfo
												:title="product.title"
												:tips="product.tips"
												:count="product.count"
												:price="product.price"
												style="width: 100%;"
											></productInfo>
										</navigator>
									</view>
									<view class="item-footer">
										<view class="item-info">
											<view class="item-number">订单编号：{{ item.sn }}</view>
											<view class="item-price-num">
												应付金额：
												<text>￥{{ item.totalPrice }}</text>
											</view>
										</view>
										<view class="item-button">
											<!-- <button class="button button-default" type="default" @tap="handleLivePusher">视频直播</button> -->
											<button
												class="button button-default"
												type="default"
												@tap="handleReject(item)"
											>
												取消订单
											</button>
											<button
												class="button button-danger"
												type="default"
												@tap="handleAccept(item)"
											>
												立即付款
											</button>
										</view>
									</view>
								</view>
							</view>
							<!-- 上拉加载组件 -->
							<uniLoadMore :status="loadStatus"></uniLoadMore>
							<!-- 上拉加载组件 -->
							<view class="noCard" v-if="listItem.length === 0">
								暂无信息
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
				<!-- <tabBar4 :currentPage="currentPage"></tabBar4> -->
			</view>
		</view>
	</view>
</template>

<script>
import navTab from './navTab.vue';
import productInfo from '@/pages/components/product-info/product-info.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		navTab,
		productInfo,
		uniLoadMore,
	},
	data() {
		return {
			loadStatus: 'more',
			currentPage: 'longIndex',
			currentTab: 0, // sweiper所在页
			pages: [1, 1, 1, 1, 1, 1, 1, 1, 1], // 第几页存储
			tabTitle: [
				{
					name: '全部',
					id: 1,
				},
				{
					name: '待支付',
					id: 2,
				},
				{
					name: '待收货',
					id: 3,
				},
				{
					name: '已完成',
					id: 4,
				},
				{
					name: '售后',
					id: 5,
				},
			], // 导航栏格式
			orderList: [
				{
					status: 1,
					order: [
						{
							shop: '微企商铺一号店',
							status: '待收货',
							statusDes: '等待付款',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title:
										'新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
						{
							shop: '微企商铺一号店',
							status: '待收货',
							statusDes: '待收货',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
						{
							shop: '微企商铺一号店',
							status: '已完成',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
					],
				},
				{
					status: 1,
					order: [
						{
							shop: '微企商铺一号店',
							status: '待支付',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title:
										'新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
								{
									title: '新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
						{
							shop: '微企商铺一号店',
							status: '已完成',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
					],
				},
				{
					status: 1,
					order: [
						{
							shop: '微企商铺一号店',
							status: '待支付',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title:
										'新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
								{
									title: '新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
						{
							shop: '微企商铺一号店',
							status: '已完成',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
					],
				},
				{
					status: 1,
					order: [
						{
							shop: '微企商铺一号店',
							status: '待支付',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title:
										'新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
								{
									title: '新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
						{
							shop: '微企商铺一号店',
							status: '已完成',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
					],
				},
				{
					status: 1,
					order: [
						{
							shop: '微企商铺一号店',
							status: '待支付',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title:
										'新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
								{
									title: '新鲜好吃的三文鱼新鲜好吃的三文鱼新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
						{
							shop: '微企商铺一号店',
							status: '已完成',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
								{
									title: '新鲜好吃的三文鱼',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
					],
				},
			],
		};
	},
	onLoad(e) {},
	methods: {
		changeTab(index) {
			this.currentTab = index;
		},
		// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
		isRequest(pages) {
			return new Promise((resolve, reject) => {
				if (this.pages[this.currentTab] >= 4) {
					this.loadStatus = 'noMore';
					return false;
				}
				this.pages[this.currentTab]++;
				setTimeout(() => {
					const newData = [
						{
							shop: '微企商铺一号店',
							status: '已完成',
							totalPrice: '240',
							sn: '5020200308',
							productList: [
								{
									title: '大豆花生',
									tips: '日本进口，400g',
									price: 120,
									count: 2,
								},
							],
						},
					];
					resolve(newData);
				}, 1000);
			});
		},
		// swiper 滑动
		swiperTab: function (e) {
			const index = e.detail.current; // 获取索引
			this.$refs.navTab.longClick(index);
		},
		// 加载更多 util.throttle为防抖函数
		loadMore: function (e) {
			this.loadStatus = 'loading';
			// console.log(`加载${this.currentTab}`); // currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
			this.isRequest().then((res) => {
				const tempList = this.orderList;
				tempList[this.currentTab].order = tempList[
					this.currentTab
				].order.concat(res);
				// console.log(tempList);
				this.orderList = tempList;
				this.$forceUpdate(); // 二维数组，开启强制渲染
			});
		},
	},
};
</script>

<style lang="scss">
.module-order {
	width: 100vw;
	font-size: 28upx;
	min-height: 100vh;
	overflow: hidden;
	color: #6b8082;
	position: relative;
	background-color: #f6f6f6;
}

.noCard {
	width: 90%;
	height: 200upx;
	margin: auto;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999999;
	box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.1);
	border-radius: 10upx;
}

.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background-color: #fff;
	top: 0;
	z-index: 999;
}
/*  #ifdef  APP-PLUS  */
.page-order-list {
	padding: var(--status-bar-height) 0 0;
	.fixed-top {
		top: var(--status-bar-height);
	}
}
/*  #endif  */
.app-header {
	background: #fff;
	display: flex;
	padding: 20rpx $uni-spacing-base;
	align-items: center;
	.app-title {
		padding-right: 20rpx;
		font-size: $uni-font-size-lg;
		font-weight: bold;
	}

	.iconfanhui {
		padding-right: 14rpx;
		line-height: 64rpx;
		font-size: 36rpx;
	}

	.search-content {
		display: flex;
		flex: 1;
		@include borderCreator('', solid, #ddd);
		border-radius: 32rpx;
		align-items: center;
		padding: 14rpx 16rpx;
		margin-right: 16rpx;
	}

	.iconsousuo {
		color: #ccc;
	}

	.search-input {
		font-size: 24rpx;
		margin-left: 12rpx;
		flex: 1;
	}

	.iconxiaoxi {
		color: $ds-main-color;
		font-size: 36rpx;
	}
}

.page-order-container {
	background: #f5f5f5;
	padding: 110rpx 0 0;

	.modal-accept {
		text-align: center;

		.modal-content {
			background: #fff;
			padding: 60rpx 32rpx;
		}

		.iconwancheng {
			display: block;
			margin: 0 0 24rpx;
			color: $ds-main-color;
			font-size: 100rpx;
			line-height: 80rpx;
		}

		.modal-title {
			font-size: 36rpx;
			color: #444;
			font-weight: bold;
		}

		.modal-tips {
			font-size: 26rpx;
			color: #999;
			margin: 0 0 50rpx;
		}
	}

	.tab-button {
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		background: #fff;
		display: flex;
	}

	.tab-body {
		.item {
			background: #fff;
			margin: 0 0 20rpx;

			@include borderCreator(top, solid, #eee);
			@include borderCreator(bottom, solid, #eee);
		}

		.item-header {
			padding: 24rpx $uni-spacing-row-base;
			@include borderCreator(bottom, solid, #eee);
		}

		.item-status {
			float: right;
			color: $uni-text-price;
			font-size: $uni-font-size-sm;
		}

		.item-body {
			padding: $uni-spacing-sm $uni-spacing-lg;
			@include borderCreator(bottom, solid, #eee);
		}

		.item-content {
			display: flex;
			padding: $uni-spacing-base 0;
			@include borderCreator(bottom, solid, #eee);
			&:last-child {
				border-bottom: none;
			}
		}
		.item-footer {
			display: flex;
			padding: 16rpx $uni-spacing-base;
			align-items: center;
		}

		.item-info {
			color: #888;
		}

		.item-number {
			font-size: $uni-font-size-sm;
			margin: 0 0 4rpx;
		}

		.item-price-num {
			font-size: $uni-font-size-sm;

			text {
				color: $uni-text-price;
			}
		}

		.item-button {
			display: flex;
			flex: 1;
			justify-content: flex-end;
		}

		.button {
			margin: 0;
			font-size: $uni-font-size-sm;
			margin-left: 20rpx;
		}
	}
}
.top-block {
	width: 100%;
	height: 76rpx;
}
.uni-load-more {
	padding-bottom: $uni-spacing-base;
}
</style>
